<template>
  <div class="left-content">
    <div class="panel panel-total">
      <div class="analyise-left">
        <i class="icon"></i>
        <div class="title">电量</div>
      </div>
      <div class="analyise-right">
        <div class="analyise-total">
          <div class="count-total">本月累计电量</div>
          <div class="progress progress-micro">
            <div class="bar" style="width: 60%;"></div>
          </div>
          <div class="top-info">
            <a href="javascript:void(0)" class="blue">
              <i class="fa fa-bar-chart animated" aria-hidden="true"></i>
            </a>
            <strong>
              <span class="font-lcd">{{leftBockInfo.currMonthUseTotal | convertNumber}}</span>
              <i style="font-weight:normal;font-style:normal;font-size:.5vw;">kw·h</i>
            </strong>
          </div>
        </div>
        <div class="analyise-raise">
          <div class="boxchart">
            截止<span class="squre">{{moment().format('YYYY-MM-DD')}}</span>同时段累计对比</div>
          <div class="number color-red" :class="{'color-green':Number(leftBockInfo.powerRate)<0}">
            <span class="font-lcd color-red">{{leftBockInfo.powerRate}}</span>%
            <i v-if="Number(leftBockInfo.powerRate)>=0" class="fa fa-arrow-up" aria-hidden="true"></i>
            <i v-if="Number(leftBockInfo.powerRate)<0" class="fa fa-arrow-down" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="panel panel-pie">
      <div class="panel-pie-header">
        <i class="icon"></i>
        <div class="title">实时功率TOP3</div>
      </div>
      <div class="panel-pie-footer">
        <div class="w1 h1" ref="pie-chart" />
      </div>
    </div>
    <div class="panel panel-bar">
      <div class="panel-bar-header">
        <i class="icon"></i>
        <div class="title">用电分析</div>
      </div>
      <div class="panel-bar-footer">
        <div style="width:100%;height:100%" ref="bar-chart" />
      </div>
    </div>
  </div>
</template>
<script>
import pie from '@/components/charts/pie'
import bar from '@/components/charts/bar'
import currencyUnit from "@/utils/currency-unit"

const option = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    x: '1',
    y: 'center',
    textStyle: {
      color: '#fff'
    }
  },
  series: [
    {
      name: '实时功率',
      type: 'pie',
      radius: ['60%', '80%'],
      center: ['70%', '50%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: '12',
            fontWeight: 'bold'
          }
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data: [
        {
          value: 135,
          name: '视频广告',
          itemStyle: {
            color: 'rgb(67,209,135)'
          }
        },
        {
          value: 1548,
          name: '搜索引擎',
          itemStyle: {
            color: 'rgb(84,254,251)'
          }
        }
      ]
    }
  ]
}

const barOption = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['本月累计用电量', '上月累计用电量'],
    right: 5,
    top: 3,
    textStyle: {
      color: '#fff'
    }
  },
  grid: {
    bottom: '15%',
    left: '16%',
    right: '5%',
    top: '5%'
  },
  xAxis: [
    {
      type: 'category',
      data: [...Array(31)].map((t, i) => ++i + '日'),
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff'
        }
      },
      //  隐藏坐标轴
      axisLine: {
        show: false
      },
      // 去除坐标轴上的刻度线
      axisTick: {
        show: false
      },
      // 网格是否显示
      splitLine: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      name: 'kWh',
      nameTextStyle: {
        color: '#fff',
        padding: [0, 20, 0, 0]
      },
      type: 'value',
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff'
        }
      },
      //  隐藏坐标轴
      axisLine: {
        show: false
      },
      // 去除坐标轴上的刻度线
      axisTick: {
        show: false
      },
      // 网格是否显示
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '本月累计用电量',
      type: 'bar',
      data: [],
      itemStyle: {
        color: '#08ED74'
      }
    },
    {
      name: '上月累计用电量',
      type: 'bar',
      data: [],
      itemStyle: {
        color: '#53FDFC'
      }
    }
  ]
}

export default {
  components: { pie, bar },
  filters: {
    convertNumber: str => currencyUnit(str)
  },
  props: {
    leftBockInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data: () => ({
    chart_pie: null,
    chart_bar: null
  }),
  mounted() {
    this.printPie()
    this.printBar()
  },
  watch: {
    leftBockInfo(value) {
      this.printPie()
      this.printBar()
    }
  },
  methods: {
    printPie() {
      let colorLists = ['rgb(255,104,3)', 'rgb(84,254,251)', 'rgb(10,240,118)']
      const { topList } = this.leftBockInfo
      this.$nextTick(() => {
        if (this.chart_pie) this.chart_pie.clear()
        this.chart_pie = this.echarts.init(this.$refs['pie-chart'])
        let options = {
          ...option
        }
        let data = null
        try {
          data = topList.map((item, i) => {
            return {
              value: item.value,
              name: item.deviceName,
              itemStyle: {
                color: colorLists[i]
              },
              tooltip: {
                formatter: params => {
                  return `<span>${
                    topList[params.dataIndex].companyName
                  }</span><br/>
                  <span>${params.name}</span><br/>
                  <span>${params.value}kW</span>`
                }
              }
            }
          })
          options.series[0].data = data
          options.series[0].name = topList[0].companyName

          this.chart_pie.setOption(options)
        } catch (e) {}
      })
    },

    printBar() {
      const { currMonthUseArray, lastMonthUseArray } = this.leftBockInfo
      this.$nextTick(() => {
        if (this.chart_bar) this.chart_bar.clear()
        this.chart_bar = this.echarts.init(this.$refs['bar-chart'])
        const option = {
          ...barOption
        }
        option.series[0].data = currMonthUseArray
        option.series[1].data = lastMonthUseArray
        this.chart_bar.setOption(option)
      })
    }
  }
}
</script>
